<template>
  <el-tabs type="border-card" @tab-click="handleTabClick">
    <el-tab-pane>
      <span slot="label">
        <i class="el-icon-coordinate"></i>未戴安全帽告警
      </span>
      <Helmet />
    </el-tab-pane>
    <el-tab-pane>
      <span slot="label">
        <i class="el-icon-mobile-phone"></i>禁用手机告警
      </span>
      <Phone />
    </el-tab-pane>
    <el-tab-pane>
      <span slot="label">
        <i class="el-icon-s-opportunity"></i>疑似睡觉告警
      </span>
      <Sleep />
    </el-tab-pane>
    <el-tab-pane >
      <span slot="label"> <i class="el-icon-s-platform"></i>缺岗告警 </span>
      <Lack />
    </el-tab-pane>
    <el-tab-pane :lazy="true">
      <span slot="label"> <i class="el-icon-s-cooperation"></i>考 勤</span>
      <Attendance />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import Helmet from "./helmet";
import Phone from "./phone";
import Sleep from "./sleep";
import Lack from "./lack";
import Attendance from "./attendance";

export default {
  data() {
    return {};
  },
  components: {
    Helmet,
    Phone,
    Sleep,
    Lack,
    Attendance,
  },
  mounted() {},
  methods: {
    //处理tabs选项卡单击
    handleTabClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>